<template>
  <page-header-wrapper>
    <div v-show="isSwitch">
      <div>
        <a-button class="m-r-10" type="plain">列表视图</a-button>
        <a-button type="plain">导出PDf</a-button>
      </div>
      <vue2-org-tree
        style="width: 100%;overflow: auto;"
        :props="{
          label: 'DeptName',
          children: 'children'
        }"
        :data="treeData"
      >
      </vue2-org-tree>
    </div>
    <a-row class="m-b-20" :gutter="20">
      <!-- fix: 暂时弃用 后期根据需要添加 -->
      <!-- <a-col
        class="m-b-20"
        :xs="24"
        :md="24"
        :lg="10"
        :xl="8"
        :xxl="6"
      >
        <a-card :bordered="false" :bodyStyle="{ minHeight: '200px' }">
          <template v-if="treeDatas.length">
            <a-tree show-line defaultExpandAll :treeData="treeDatas"></a-tree>
          </template>
          <template v-else>
            <a-empty />
          </template>
        </a-card>
      </a-col> -->
      <!-- <a-col :xs="24" :md="24" :lg="14" :xl="16" :xxl="18"> -->
      <a-col v-show="!isSwitch" :span="24">
        <a-card class="search-card  m-b-20" :bordered="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="14" :lg="14" :xl="12" :xxl="8" :sm="24">
                  <a-form-item label="部门名称">
                    <a-input v-model="queryParam.strContent.DeptName" placeholder="请输入部门名称" @pressEnter="$refs.table.refresh(true)"/>
                  </a-form-item>
                </a-col>
                <a-col :md="10" :lg="10" :xl="8" :xxl="6" :sm="24">
                  <div class="table-page-search-submitButtons">
                    <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                    <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                  </div>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-card>
        <a-card :bordered="false">
          <s-table
            ref="table"
            :scroll="{x: true}"
            :rowKey="record => record.ID"
            :columns="columns"
            :data="loadData"
            :pagination="{ showTotal: total => `共 ${total} 条` }"
          >
            <!-- 表格操作栏 -->
            <div slot="tabAction">
              <a-button class="m-r-10" v-action:add type="primary" icon="plus" @click="handleOperation('add')">新增部门</a-button>
              <a-button class="m-r-10" type="dashed" icon="export" ::loading="exportLoading" @click="handleExportDownload">导出</a-button>
              <!-- <a-button type="">切换</a-button> -->
            </div>

            <span slot="action" slot-scope="text, record">
              <template>
                <a v-action:add @click="handleOperation('addChild', record.ID)">新增子部门<a-divider type="vertical" /></a>
                <a v-action:edit @click="handleOperation('update', record.ID)">修改<a-divider type="vertical" /></a>
                <a-popconfirm
                  title="您确定是否删除当前部门?"
                  ok-text="是"
                  cancel-text="否"
                  placement="bottomLeft"
                  @confirm="handleRemove(record.ID)"
                >
                  <a-icon slot="icon" type="question-circle-o" />
                  <a href="#">删除</a>
                </a-popconfirm>
              </template>
            </span>
          </s-table>
        </a-card>
      </a-col>
    </a-row>
    <edit-department :visible.sync="visibles" :propsData="propsData"></edit-department>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getDepartmentList, setDepartments } from '@/api/system'
import { exportToExcel, formatJson } from '@/vendor/Export2Excel'
// import { getTreeList } from '@/api/common'
import EditDepartment from './edit'
const columns = [
  {
    title: '部门名称',
    align: 'left',
    dataIndex: 'DeptName'
  },
  {
    title: '部门等级',
    align: 'center',
    dataIndex: 'DeptLevel'
  },
  {
    title: '部门地址',
    align: 'center',
    dataIndex: 'DeptAddress'
  },
  {
    title: '部门电话',
    align: 'center',
    dataIndex: 'DeptPhone'
  },
  {
    title: '操作',
    align: 'center',
    width: '200px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'TableList',
  components: {
    STable,
    EditDepartment
  },
  data () {
    this.columns = columns
    return {
      visibles: false,
      exportLoading: false,
      isSwitch: false,
      treeData: {},
      // 查询参数
      queryParam: {
        mode: '',
        strContent: { DeptName: '' },
        userid: this.$store.getters.userid
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getDepartmentList(Object.assign(parameter, this.queryParam)).then(res => {
          this.listData = res.data
          this.treeData = res.data[0]
          return res
        })
      },
      propsData: {
        type: 'add',
        id: ''
      },
      treeDatas: [],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    fetchDepartment () {
      // getTreeList({ mode: 'dept' }).then(res => {
      //   this.treeDatas = res.result
      // }).catch(() => {})
    },
    handleOperation (type, id) {
      this.visibles = true
      this.propsData = { type, id }
    },
    renderContents (e) {
      return ''
    },
    handleRemove (ID) {
      setDepartments({
        State: 'delete',
        sys_department_Modules: { ID }
      }).then((res) => {
        if (res.code) {
          this.$message.success('部门删除成功', 2.5)
        } else {
          this.$message.error('部门删除失败, 请稍后重试', 2.5)
        }
      }).catch((err) => {
        this.$message.error(err, 2.5)
      }).finally(() => {
        this.$refs.table.refresh(true)
      })
    },
    handleReset () {
      this.queryParam = {
        mode: '',
        strContent: { DeptName: '' }
      }
      this.$refs.table.refresh()
    },
    getTreeChildren (treeList) {
      const result = []
      treeList && treeList.map(item => {
        if (item.children && item.children.length > 0) {
          result.push(...this.getTreeChildren(item.children))
        }
        result.push(item)
      })
      return result
    },
    handleExportDownload () {
      this.exportLoading = true
      const header = ['部门名称', '部门等级', '部门地址', '部门电话']
      const filterVal = ['DeptName', 'DeptLevel', 'DeptAddress', 'DeptPhone']
      const list = this.getTreeChildren(this.listData)
      const data = formatJson(filterVal, list)
      const filename = '部门'
      exportToExcel({
        header,
        data,
        filename
      })
      setTimeout(() => {
        this.exportLoading = false
      }, 300)
    }
  }
}
</script>
<style scoped>
@import url(https://unpkg.com/vue2-org-tree/dist/style.css);
</style>
